<template>
  <el-table :data="gridData" border>
    <template #empty>
      <el-empty :image-size="150" description="暂无数据"></el-empty>
    </template>
    <el-table-column type="index" label="序号" width="60"></el-table-column>
    <el-table-column prop="name" label="科创对接人员"></el-table-column>
    <el-table-column prop="deptName" label="所属单位"></el-table-column>
    <el-table-column prop="username" label="用户名"></el-table-column>
    <el-table-column prop="phoneNum" label="手机号码">
      <template v-slot="scope">
        {{
          scope.row.phoneNum
            ? scope.row.phoneNum.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2")
            : ""
        }}
      </template>
    </el-table-column>
    <el-table-column prop="email" label="邮箱"></el-table-column>
    <el-table-column
      prop="lastUpdateUserName"
      label="登记人员"
    ></el-table-column>
    <el-table-column prop="lastUpdateTime" label="登记时间">
      <template v-slot="scope">
        {{ scope.row.lastUpdateTime ? scope.row.lastUpdateTime.split(" ")[0] : '' }}
      </template>
    </el-table-column>
  </el-table>
  <re-pagination
    :total="total"
    v-show="total > 0"
    v-model:page="formInline.pageNum"
    v-model:limit="formInline.pageSize"
    @pagination="handleSearch"
  />
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from "vue";
import { getAbutmentDetail } from "/@/api/expert";

const props = defineProps({
  abutmentId: {
    type: Number,
    default: () => 0
  }
});

const data = {
  gridData: [], // 表格数据
  formInline: {
    pageNum: 1,
    pageSize: 10
  }
};

let total = ref<number>(0);

const { gridData, formInline } = toRefs(reactive(data));

onMounted(() => {
  getDetailInfo(props.abutmentId);
});

// 查询详情信息
const getDetailInfo = async abutmentId => {
  try {
    const params = {
      id: abutmentId,
      pageSize: formInline.value.pageSize,
      pageNum: formInline.value.pageNum
    };
    const { code, data } = await getAbutmentDetail(params);
    if (code === 200) {
      gridData.value = data.pageInfo.list;
      total.value = data.pageInfo.rows;
    }
  } catch (err) {
    console.log(err);
  }
};

// 根据条件进行搜索
const handleSearch = (data): void => {
  formInline.value = {
    pageNum: data.page.value || data.page,
    pageSize: data.limit.value || data.limit
  };
  getDetailInfo(props.abutmentId);
};
</script>
<style scoped lang="scss"></style>
